import React, {Component} from 'react';
import {Card, Form, Icon, Modal, Select, Table} from "antd";
import {reqLookRecruit, reqUpdateRecruitOrder} from "../../api";
import Button from "antd/lib/button";
import {PAGE_SIZE} from "../../utils/constants";

/*
* 招聘订单路由*/
class Order extends Component {
    state = {
        count:0,
        results: [],//当前页招聘订单列表
    }

    //异步获取订单基本信息

    getRecruitOrder = async (page) => {
        //发异步ajax请求，获取数据
        const result = await reqLookRecruit(page,PAGE_SIZE)
        const {results,count} = result.data
        //更新状态
        this.setState({
            results,
            count
        })
    }

    //初始化Table所有列的数组
    initColumns = () => {
        this.columns = [
            {
                title: '求职者',
                dataIndex: 'employee.name',//显示数据对应的属性名
            },
            {
                title: '岗位',
                dataIndex: 'position'
            },
            {
                title: '技术要求',
                dataIndex: 'recruit.requirement',
            },

            {
                title: '悬赏金',
                dataIndex: 'reward',
            },
            {
                title: '保质期',
                dataIndex: 'pay_day',
            },
            {
                title: '订单状态',
                dataIndex: 'status',
                render(item) {
                        if(item==="td"){
                            return "已投递"
                        }else if(item==="jlbhs"){
                            return "简历不合适"
                        }else if(item==="ms"){
                            return "可面试"
                        }else if(item==="msbtg"){
                            return "面试不通过"
                        }else if(item==="rz"){
                            return "可入职"
                        }else if(item==="yhjj"){
                            return "用户拒绝"
                        }else if(item==="yrz"){
                            return "已入职"
                        }else if(item==="ylz"){
                            return "已离职"
                        }else {
                            return "悬赏到期"
                        }
                },
            },
            {
                title: '操作',
                width: 300,
                render: (results) => (
                    <span>
                        <Button type='primary' onClick={() => this.showModal(results)}>
                            <Icon type='form'/>
                            修改订单状态
                        </Button>
                    </span>
                )
            }
        ]
    }

    //为第一次render()准备数据
    componentWillMount() {
        this.initColumns()
    }

    //发异步ajax请求
    componentDidMount() {
        this.getRecruitOrder()
    }

    showModal = (results) => {
        //保存当前订单id
        this.orderId = results.id
        //保存订单状态
        this.ste = results.status
        //更新状态
        this.setState({
            visible: true,
        });
    };

    handleCancel = () => {
        console.log('Clicked cancel button');
        this.setState({
            visible: false,
        });
    };
    //点击修改订单状态弹出的事件处理
    handleOk = () => {
        //进行表单验证，如果通过了，才发送请求
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                //1、搜集数据
                const orderId=this.orderId
                const status=values
                //2、调用接口请求函数去添加/更新
                const result = await reqUpdateRecruitOrder(status,orderId)
                //跳转到当前页
                window.location.replace('/recruit/order')
                //3、根据结果提示
            } else {
                console.log('发送ajax请求失败 ');
            }
        });

        //保存状态
        this.setState({
            confirmLoading: true,
        });
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 2000);

    };
    render() {
        //读取状态数据
        const {results,count} = this.state
        const {visible, confirmLoading} = this.state;
        const {Option} = Select;
        const {getFieldDecorator} = this.props.form;
        const state=this.ste
        return (
            <div>
                <Card>
                    <Table
                        rowKey='id'
                        dataSource={results}
                        columns={this.columns}
                        pagination={{
                            total:count,
                            defaultPageSize:PAGE_SIZE,
                            showQuickJumper:true,
                            onChange:(page)=>{
                                this.getRecruitOrder(page)
                            }

                        }}
                    />
                </Card>
                <Form.Item>
                    <Modal
                        title="请修改订单状态"
                        visible={visible}
                        onOk={this.handleOk}
                        confirmLoading={confirmLoading}
                        onCancel={this.handleCancel}
                    >
                        <p>
                            {getFieldDecorator('status', {initialValue: state})(<Select
                                className="recruit-style-select1"
                                showSearch
                                style={{width: 200}}
                                placeholder="修改订单状态"
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                <Option value="td">已投递</Option>
                                <Option value="jlbhs">简历不合适</Option>
                                <Option value="ms">可面试</Option>
                                <Option value="msbtg">面试不通过</Option>
                                <Option value="rz">可入职</Option>
                                <Option value="yhjj">用户拒绝</Option>
                                <Option value="yrz">已入职</Option>
                                <Option value="ylz">已离职</Option>
                                <Option value="xsdq">悬赏到期</Option>
                            </Select>)}

                        </p>
                    </Modal>
                </Form.Item>
            </div>
        )
    }
}

const WrappedOrder = Form.create()(Order);
export default WrappedOrder;